<template>
  <div class="comtainer">
    <el-row style="height: 100%" :gutter="10">
      <el-col :span="8" style="height: 100%">
        <div class="left">
          <el-card class="box-card" shadow="hover">
            <div class="left-top">
              <span>应用权限</span>
              <el-dropdown trigger="click" @command="addAppAuth">
                <el-button type="primary" icon="el-icon-plus" size="mini" plain
                  >新增
                </el-button>
                <el-dropdown-menu slot="dropdown" class="user-dropdown">
                  <el-dropdown-item
                    v-for="(item, index) in appList"
                    :key="index"
                    :command="item"
                    >{{ item.name }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <el-tree
              class="filter-tree"
              :data="appData"
              node-key="id"
              :props="defaultProps"
              default-expand-all
              highlight-current
              @current-change="currentChange"
              ref="appTree"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span v-if="!hideBtn && data.id !== -1">
                  <el-button
                    type="text"
                    @click.stop="() => TNodeDel(node, data)"
                    class="btnIcon"
                    icon="el-icon-delete"
                  ></el-button>
                </span>
              </span>
            </el-tree>
          </el-card>
        </div>
      </el-col>
      <el-col :span="16" style="height: calc(100% - 10px)">
        <el-card class="box-card" shadow="hover">
          <el-row style="height: calc(100% - 10px)" :gutter="20">
            <el-col :span="12" style="height: 100%">
              <div class="middle">
                <div class="title">
                  <span>组织权限</span>
                </div>
                <el-tree
                  class="filter-tree"
                  show-checkbox
                  :data="orgData"
                  node-key="id"
                  :check-strictly="true"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  default-expand-all
                  @check-change="orgCheckChange"
                  ref="orgTree"
                >
                </el-tree>
              </div>
            </el-col>
            <el-col :span="12" style="height: 100%">
              <div class="right">
                <div class="title">
                  <span>菜单权限</span>
                </div>
                <el-tree
                  class="filter-tree"
                  show-checkbox
                  :data="menuData"
                  node-key="id"
                  :props="menuProps"
                  :check-strictly="true"
                  :expand-on-click-node="false"
                  default-expand-all
                  @check-change="menuCheckChange"
                  ref="menuTree"
                >
                </el-tree>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { applicationQueryList } from "@/api/systemManagement/applicationManagement.js";
import { orgTreeData } from "@/api/systemManagement/orgnizationManagement.js";
import { menuTreeData } from "@/api/systemManagement/authManagement.js";

export default {
  props: {
    authInformation: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      filterText: "",
      hideBtn: false,
      appList: [], //应用列表
      appData: [],
      orgData: [],
      menuData: [],
      orgCheckedKeys: [],
      menuCheckedKeys: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      menuProps: {
        children: "children",
        label: "name",
      },
      actionProps: {
        children: "menuFuncList",
        label: "name",
      },
      currentIndex: 0,
      orgMenuAuth: [],
      isFirstLoad: 0,
    };
  },
  watch: {
    authInformation: {
      handler(val) {
        this.isFirstLoad++;
        if (val.length != 0) {
          this.orgMenuAuth = JSON.parse(JSON.stringify(val));
          // if (this.isFirstLoad == 1) {
          //   this.orgMenuAuth[this.currentIndex].menuJurisdictionBeanList = [];
          // }
          this.setAppTreeData();
        }
      },
      deep: true,
    },
  },
  created() {},
  mounted() {
    this.orgMenuAuth = JSON.parse(JSON.stringify(this.authInformation));
    this.init();
  },
  methods: {
    init() {
      this.getAppList(); //获取应用列表
      //this.getOrgTreeData();//获取组织树
      //this.getMenuTreeData();//获取菜单树
    },
    filterNode(value, data, node) {
      if (data.hasPermission == 1) {
        this.orgCheckedKeys.push(data.id);
      }
    },
    //添加应用权限
    addAppAuth(command) {
      let isRepeat = this.appData.every((item) => {
        return item.id != command.id;
      });
      if (isRepeat) {
        this.appData.push({
          id: command.id,
          name: command.name,
          rowIndex: this.appData.length,
        });
        this.orgMenuAuth.push({
          appBean: {
            appId: command.id,
            appName: command.name,
          },
          menuJurisdictionBeanList: [],
          orgStrList: [],
        });
        if (this.appData.length == 1) {
          this.getOrgTreeData(this.appData[0].id);
          this.getMenuTreeData();
        }
      } else {
        this.$message.warning("请勿重复添加应用权限");
      }
    },
    //点击切换应用
    currentChange(data, node) {
      this.currentIndex = data.rowIndex;
      this.$refs.appTree.setCurrentKey(data.id);
      this.getOrgTreeData(data.id);
      this.setMenuAuth();
    },
    //删除应用
    TNodeDel(node, data) {
      this.$confirm("此操作将删除【" + data.name + "】, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.orgMenuAuth.splice(data.rowIndex, 1);
          this.appData.splice(data.rowIndex, 1);
          this.appData.forEach((item, i) => {
            item.rowIndex = i;
          });
          if (data.rowIndex == this.currentIndex) {
            this.currentIndex = 0;
            this.$refs.appTree.setCurrentKey(this.appData[0].id);
            this.getOrgTreeData(this.appData[0].id);
            this.setMenuAuth();
          }
        })
        .catch((e) => {});
    },
    //获取应用列表
    getAppList() {
      applicationQueryList().then((res) => {
        this.appList = res.data;
      });
    },
    //获取组织树数据
    getOrgTreeData(appId) {
      //得到组织树的数据
      orgTreeData({ appid: appId }).then(
        (res) => {
          if (res.code == 200) {
            this.orgData = res.data;
            this.setOrgAuth();
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //获取菜单树数据
    getMenuTreeData() {
      menuTreeData().then(
        (res) => {
          if (res.code == 200 && res.data.length > 0) {
            this.menuData = res.data;
            this.menuData = this.changeMenuTree(res.data);
            this.setMenuAuth();
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //设置应用权限
    setAppTreeData() {
      this.appData = this.authInformation.map((item, i) => {
        let obj = {
          id: item.appBean.appId,
          name: item.appBean.appName,
          rowIndex: i,
        };
        return obj;
      });
      setTimeout(() => {
        this.$refs.appTree.setCurrentKey(this.appData[0].id);
      }, 0);
      this.getOrgTreeData(this.appData[0].id);
      this.getMenuTreeData();
    },
    //设置组织的权限
    setOrgAuth() {
      if (
        !this.authInformation[this.currentIndex].orgStrList ||
        this.authInformation[this.currentIndex].orgStrList.length == 0
      ) {
        this.$refs.orgTree.setCheckedKeys([], true);
      } else {
        let arr = this.authInformation[this.currentIndex].orgStrList.map(
          (item) => item
        );
        this.$refs.orgTree.setCheckedKeys(arr);
      }
    },
    //设置菜单的权限
    setMenuAuth() {
      if (
        !this.orgMenuAuth[this.currentIndex].menuJurisdictionBeanList ||
        this.orgMenuAuth[this.currentIndex].menuJurisdictionBeanList.length == 0
      ) {
        this.$refs.menuTree.setCheckedKeys([], true);
      } else {
        let arr = this.orgMenuAuth[
          this.currentIndex
        ].menuJurisdictionBeanList.map((item) => {
          if (item.isFunc == 1) {
            return item.funcId;
          } else {
            return item.menuId;
          }
        });
        this.$refs.menuTree.setCheckedKeys(arr);
      }
    },
    //改变组织勾选框
    orgCheckChange(data, selected, children) {
      //let halfData = this.$refs.orgTree.getHalfCheckedKeys(); //半选中状态的节点

      if (selected) {
        if (data.children) {
          data.children.map((item) => {
            this.$refs.orgTree.setChecked(item.id, true);
          });
        }
      } else {
        if (data.children) {
          data.children.map((item) => {
            this.$refs.orgTree.setChecked(item.id, false);
          });
        } else {
          if (data.parentid != 0) {
            this.$refs.orgTree.setChecked(data.parentid, true);
          }
        }
      }
      let checkedData = this.$refs.orgTree.getCheckedKeys(); //全选中状态的节点
      //let list = halfData.concat(checkedData); //合并两个数组
      this.orgMenuAuth[this.currentIndex].orgStrList = checkedData;
    },
    //改变菜单勾选框
    menuCheckChange(data, selected, children) {
      if (selected) {
        if (data.children) {
          data.children.map((item) => {
            this.$refs.menuTree.setChecked(item.id, true);
          });
        }
        // if (condition) {
          
        // }
        //this.$refs.menuTree.setChecked(data.parentid, true);
      } else {
        if (data.children) {
          data.children.map((item) => {
            this.$refs.menuTree.setChecked(item.id, false);
          });
        } else {
          if (data.parentid != 0) {
            this.$refs.menuTree.setChecked(data.parentid, true);
          }
        }
      }
      //获取选中节点
      let menuList = this.$refs.menuTree.getCheckedNodes();
      let arr = menuList.map((item) => {
        const obj = {};
        if (!item.children) {
          obj.menuId = item.menuId;
          obj.isFunc = 1;
          obj.funcId = item.id;
          obj.funcCode = item.code;
        } else {
          obj.menuId = item.id;
          obj.isFunc = 0;
          obj.funcId = "";
          obj.funcCode = "";
        }
        return obj;
      });
      //debugger
      this.orgMenuAuth[this.currentIndex].menuJurisdictionBeanList = arr;
    },
    //处理菜单树的数据
    changeMenuTree(data) {
      data.forEach((item) => {
        if (item.menuFuncList && item.menuFuncList.length != 0) {
          item.menuFuncList.forEach((value) => {
            //value.parentid = value.menuId;
            item.children.unshift(value);
          });
        }
        if (item.children && item.children.length != 0) {
          return this.changeMenuTree(item.children);
        } else {
          return item;
        }
      });
      return data;
    },
    //获取组织和菜单权限
    getorgMenuAuth() {
      return this.orgMenuAuth;
    },
  },
};
</script>

<style lang="less" scoped>
.el-tree-node__expand-icon + .custom-tree-node {
  font-weight: 700;
}
.is-leaf + .custom-tree-node {
  font-weight: 400;
}
.comtainer {
  width: 100%;
  height: 100%;
  .left {
    height: 100%;
    padding: 0 0 10px 0;
    .left-top {
      text-align: right;
      position: relative;
      margin-bottom: 10px;
      span {
        position: absolute;
        font-size: 15px;
        font-weight: bold;
        left: 0;
      }
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  }
  .middle {
    overflow: auto;
    height: 100%;
    padding-bottom: 20px;
  }
  .right {
    overflow: auto;
    height: 100%;
    padding-bottom: 20px;
    .menuList {
      .isActive {
        margin-left: -5px;
      }
    }
  }
  .title {
    text-align: left;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .box-card {
    width: 100%;
    height: 100%;
    /deep/.el-card__body {
      height: 100%;
    }
  }
  .divalter {
    width: 1px;
    height: 100%;
    background: black;
  }
}
</style>
